import MyAnimation from './MyAnimation.js';

const btn = document.querySelector('.mSpinBtn');

const animationPlay = (() => {

    const rotateNum = (loop, peer, num, dir = 1) => {
        let random = Math.random() * (peer - 10) + 5;
        random = Math.floor(random)
        let _num = loop * 360;
        _num -= peer / 2;
        _num += peer * num;
        _num += random;
        return _num * dir;
    }

    let outterStart = { rotate: 0 }
    let innerStart = { rotate: 0 }

    const animationInstance = new MyAnimation(5000);
    const wheelOutter = document.querySelector('.mWheelOutter');
    const wheelInner = document.querySelector('.mWheelInner')
    const mWheelItems = document.querySelectorAll('.mWheelContainer .sec');

    return function (outterNum, innerNum) {

        Array.prototype.map.call(mWheelItems, item => {
            item.classList.remove('on')
            item.querySelector('.icons').classList.remove('active')
        })

        const outterEnd = { rotate: rotateNum(5, 30, outterNum) }
        const innerEnd = { rotate: rotateNum(7, 45, innerNum, -1) }

        const outterCallBack = (pass) => {
            wheelOutter.style.transform = `rotate(${pass.rotate}deg)`
        }
        const outterEndCallback = () => {
            const outterActiceNode = wheelOutter.children[outterNum]
            outterActiceNode.classList.add('on')
            outterActiceNode.querySelector('.icons').classList.add('active')
            outterStart = { rotate: outterEnd.rotate % 360 }
        }
        animationInstance.animate(
            outterStart, outterEnd, outterCallBack, outterEndCallback, 'Bezier.InOut'
        )

        const innerCallBack = (pass) => {
            wheelInner.style.transform = `rotate(${pass.rotate}deg)`
        }
        const innerEndCallback = () => {
            const innerActiveNode = wheelInner.children[innerNum]
            innerActiveNode.classList.add('on')
            innerActiveNode.querySelector('.icons').classList.add('active')
            innerStart = { rotate: innerEnd.rotate % 360 }
        }
        animationInstance.animate(
            innerStart, innerEnd, innerCallBack, innerEndCallback, 'Bezier.InOut'
        )
    }
})();


btn.addEventListener('click', function () {

    animationPlay(4, 0);

}, false)


